<template>
  <div>
    <Drawer
        :title="title"
        v-model="visible"
        width="80%"
        draggable
    >
      <div :style="{ maxHeight: maxHeight }" class="drawer-content">
        <div class="user-info">
          <Avatar :size="40" :src="article.avatar" />
          <div >
            <span>{{article.nickname}}</span>
            <p>{{article.createTime}}</p>
          </div>
        </div>
        <div class="article-content">
          <Carousel :v-model="0"  v-if="visible">
            <CarouselItem  v-for="(item,index) in banner" :key="index">

              <div class="demo-carousel">
                <img :src="item"  alt=""></img>
              </div>
            </CarouselItem>

          </Carousel>
          <div v-html="article.content"></div>
        </div>
        <div class="comment-content">
          <div class="span-title">
            <span >全部评论</span>
          </div>
          <div class="comment-info">
            <div class="first" v-for="(item, index) in comment" :key="index">
              <div class="first-user">
                <Avatar :size="36" :src="item.avatar" />
              </div>
              <div class="first-content">
                <h3 class="first-username">{{item.nickname}}</h3>
                <span class="first-time">{{item.dtime}}</span>
                <p class="first-comment">{{item.content}}</p>
                <div class="first-right">
                  <span
                      class="delete"
                      @click="comment_delete(item)"
                  >删除</span>
                </div>

                <div class="second" v-for="(child, index) in item.children" :key="index">
                  <div class="second-user">
                    <Avatar :size="36" :src="child.avatar" />
                  </div>
                  <div class="second-content">
                    <h3 class="second-username">{{child.nickname}}</h3>
                    <span class="second-time">{{child.dtime}}</span>
                    <p class="second-comment">{{child.content}}</p>
                  </div>
                </div>
              </div>


            </div>
          </div>

        </div>
      </div>

    </Drawer>
  </div>
</template>

<script>
import {deleteComment} from "@/api/article/article";
import {deleteLog} from "@/api";

export default {
  name: "article-detail",
  data(){
    return {
      visible: this.value,
      title: "",
      banner: [],
      maxHeight: 510,
      article: {},
      comment: []
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
  },
  methods: {
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      this.title = this.data.article.title;
      this.article = this.data.article;
      this.comment = this.data.comment;
      this.banner = this.data.article.imgUrl.split(",");
      this.visible = value;
    },
    comment_delete(item){
      let _this = this;
      _this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除该条评论?",
        loading: true,
        onOk: () => {
          deleteComment({id: item.id}).then(res => {
            if(res.success){
              _this.comment = _this.removeComment(_this.comment, item.id);
              _this.$Message.success(res.result);
            }
            _this.$Modal.remove();
          })
        },
      });

    },
    removeComment(comment, id){
      for(let i in comment){
        if(comment[i]['id'] == id){
          comment.splice(i, 1);
          break;
        }
        for(let j in comment['children']){
          if(comment['children'][j]['id'] == id){
            comment['children'].splice(j, 1);
            break;
          }
        }
      }
      return comment;
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
  },

}
</script>

<style lang="less">
.drawer-content{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.article-content{
  width: 45%;
}
.comment-content{
  padding-left: 20px;
  width: 55%;
  height: 550px;
  overflow: scroll;
  border-left: 1px solid #D3D3D3;

  .span-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-left: 12px;
    border-left: 4px solid #ec7259;
    font-size: 18px;
    font-weight: 500;
    height: 20px;
    line-height: 20px;
  }
}
.user-info{
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-content: center;

  span {
    font-size: 16px;
    font-weight: 500;
    margin-right: 8px;
  }
  p{
    color: #969696;
  }
}

 .demo-carousel {
   width: 100%;
   height: 200px;
   background-color: #ffffff;
   display: flex;
   align-content: center;
   justify-content: center;
 }

 .first  {
   display: flex;
   position: relative;
   padding: 10px 10px 0 0;
 }

.first-right,
.second-right {
  position: absolute;
  right: 1%;
  top: 10px;
}

.first-right span,
.second-right span {
  margin-right: 20px;
  cursor: pointer;
}
/* 删除评论 */
.delete:hover {
  color: red;
}

.second {
  background-color: #f3f3f3;
  display: flex;
  position: relative;
  padding: 10px 10px 0 10px;
}
.first-user .second-username {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  display: flex;
  align-content: center;
}
.first-username,
.second-username {
  font-size: 12px;
  font-weight: 500;
  margin-right: 8px;
}
.first-content,
.second-content{
  padding-left: 5px;
  flex: 9;
}

.first-time,
.second-time {
  color: #767575;
}
.first-comment,
.second-comment {
  margin-top: 5px;
}
</style>